<template>
	<view
		class="u-swiper-wrap"
		:style="{
			borderRadius: `${borderRadius}rpx`,
			height: height + 'rpx',
		}"
	>
		<swiper
			:current="elCurrent"
			@change="change"
			@animationfinish="animationfinish"
			:interval="interval"
			:circular="circular"
			:duration="duration"
			:autoplay="autoplay"
			:previous-margin="effect3d ? effect3dPreviousMargin + 'rpx' : '0'"
			:next-margin="effect3d ? effect3dPreviousMargin + 'rpx' : '0'"
			:style="{
				height: height + 'rpx',
				backgroundColor: bgColor
			}"
		>
			<swiper-item v-if="video" class="u-swiper-item" >
				<!-- #ifdef H5 || MP-WEIXIN -->
					<video
						@click="clickVideo"
						ref="video"
						id="myVideo"
						style="width: 100%;height: 100%;"
						:src="video"
						:autoplay="true"
						@timeupdate="updateProgress"
						@loadedmetadata="getVideoDuration"
						:controls="false"
						>
					    <view class="controls" :style="{ opacity: showControls ? 1 : 0 }" style="transition: opacity 1s;">
							<!-- <button @click="isPaused ?  startPlay() : videoPause()">{{ isPaused ? '播放' : '暂停' }}</button> -->
							<text  @click.stop="isPaused ?  startPlay() : videoPause()" :class="isPaused ? 'play-icon' : 'pause-icon'"></text>
							<view class="progress-bar">
								<view class="progress" :style="{ width: progress + '%' }"></view>
							</view>
							<!-- <button @click="toggleFullscreen">全屏</button> -->
							<text @click.stop="toggleFullscreen" class="fullscreen-icon"></text>
						</view>
					</video>
				<!-- #endif -->
				<!-- #ifdef APP-PLUS -->
					<view v-show="!showWeeksModal" class="mask-box" style="width: 100%;" :style="{ height: height + 'rpx' }">
						<image class="u-swiper-image" :src="list[0]" :mode="imgMode" :style="{ height: height + 'rpx' }"></image>
						<view class="mask" @click="startPlay">
							<image style="height: 100rpx;width: 100rpx;" src="https://zh69xx.oss-cn-beijing.aliyuncs.com/upload/common/vide_icon.png"></image>
						</view>
					</view>
					<!-- <video
						v-show="showWeeksModal"
						ref="video"
						id="myVideo"
						class="app-video"
						style="width: 100%;height: 750rpx;"
						:src="video"
						:show-fullscreen-btn="true"
						@play="startPlay"
						@pause="videoPause"
					></video> -->
					<video
						v-show="showWeeksModal"
						@click="clickVideo"
						ref="video"
						id="myVideo"
						style="width: 100%;height: 100%;"
						:src="video"
						:autoplay="true"
						@play="startPlay"
						@timeupdate="updateProgress"
						@loadedmetadata="getVideoDuration"
						@pause="videoPause"
						:controls="false"
						>
					    <view class="controls" :style="{ opacity: showControls ? 1 : 0 }" style="transition: opacity .5s;">
							<text  @click.stop="isPaused ?  startPlay() : videoPause()" :class="isPaused ? 'play-icon' : 'pause-icon'"></text>
							<view class="progress-bar">
								<view class="progress" :style="{ width: progress + '%' }"></view>
							</view>
							<text @click.stop="toggleFullscreen" class="fullscreen-icon"></text>
						</view>
					</video>
				<!-- #endif -->
			</swiper-item>
			<swiper-item class="u-swiper-item" v-for="(item, index) in list" :key="index">
				<view
					class="u-list-image-wrap"
					@tap.stop.prevent="listClick(index)"
					:class="[uCurrent != index ? 'u-list-scale' : '']"
					:style="{
						borderRadius: `${borderRadius}rpx`,
						transform: effect3d && uCurrent != index ? 'scaleY(0.9)' : 'scaleY(1)',
						margin: effect3d && uCurrent != index ? '0 20rpx' : 0
					}"
				>
					<image class="u-swiper-image" :src="item[name] || item" :mode="imgMode" :style="{ height: height + 'rpx' }"></image>
					<view
						v-if="title && item.title"
						class="u-swiper-title u-line-1"
						:style="[
							{
								'padding-bottom': titlePaddingBottom
							},
							titleStyle
						]"
					>
						{{ item.title }}
					</view>
				</view>
			</swiper-item>
		</swiper>
		<view
			class="u-swiper-indicator"
			:style="{
				top: indicatorPos == 'topLeft' || indicatorPos == 'topCenter' || indicatorPos == 'topRight' ? '12rpx' : 'auto',
				bottom: indicatorPos == 'bottomLeft' || indicatorPos == 'bottomCenter' || indicatorPos == 'bottomRight' ? '36rpx' : 'auto',
				justifyContent: justifyContent,
				padding: `0 ${effect3d ? '74rpx' : '24rpx'}`
			}"
		>
			<block v-if="mode == 'rect'">
				<view class="u-indicator-item-rect" :class="{ 'u-indicator-item-rect-active': index == uCurrent }" v-for="(item, index) in list" :key="index"></view>
			</block>
			<block v-if="mode == 'dot'">
				<view class="u-indicator-item-dot" :class="{ 'u-indicator-item-dot-active': index == uCurrent }" v-for="(item, index) in list" :key="index"></view>
			</block>
			<block v-if="mode == 'round'">
				<view class="u-indicator-item-round" :class="{ 'u-indicator-item-round-active': index == uCurrent }" v-for="(item, index) in list" :key="index"></view>
			</block>
			<block v-if="mode == 'number' && video ? uCurrent + 1 != 1 : true">
				<view class="u-indicator-item-number">{{ uCurrent + 1 }}/{{ video ?  list.length + 1 : list.length }}</view>
			</block>
		</view>
	</view>
</template>

<script>
/**
 * swiper 轮播图
 * @description 该组件一般用于导航轮播，广告展示等场景,可开箱即用
 * @tutorial https://www.uviewui.com/components/swiper.html
 * @property {Array} list 轮播图数据，见官网"基本使用"说明
 * @property {Boolean} title 是否显示标题文字，需要配合list参数，见官网说明（默认false）
 * @property {String} mode 指示器模式，见官网说明（默认round）
 * @property {String Number} height 轮播图组件高度，单位rpx（默认250）
 * @property {String} indicator-pos 指示器的位置（默认bottomCenter）
 * @property {Boolean} effect3d 是否开启3D效果（默认false）
 * @property {Boolean} autoplay 是否自动播放（默认true）
 * @property {String Number} interval 自动轮播时间间隔，单位ms（默认2500）
 * @property {Boolean} circular 是否衔接播放，见官网说明（默认true）
 * @property {String} bg-color 背景颜色（默认#f3f4f6）
 * @property {String Number} border-radius 轮播图圆角值，单位rpx（默认8）
 * @property {Object} title-style 自定义标题样式
 * @property {String Number} effect3d-previous-margin mode = true模式的情况下，激活项与前后项之间的距离，单位rpx（默认50）
 * @property {String} img-mode 图片的裁剪模式，详见image组件裁剪模式（默认aspectFill）
 * @event {Function} click 点击轮播图时触发
 * @example <u-swiper :list="list" mode="dot" indicator-pos="bottomRight"></u-swiper>
 */
export default {
	name: 'u-swiper',
	props: {
		// 轮播图的数据,格式如：[{image: 'xxxx', title: 'xxxx'}，{image: 'yyyy', title: 'yyyy'}]，其中title字段可选
		list: {
			type: Array,
			default() {
				return [];
			}
		},
		// 是否显示title标题
		title: {
			type: Boolean,
			default: false
		},
		// 用户自定义的指示器的样式
		indicator: {
			type: Object,
			default() {
				return {};
			}
		},
		// 圆角值
		borderRadius: {
			type: [Number, String],
			default: 8
		},
		// 隔多久自动切换
		interval: {
			type: [String, Number],
			default: 3000
		},
		// 指示器的模式，rect|dot|number|round
		mode: {
			type: String,
			default: 'round'
		},
		// list的高度，单位rpx
		height: {
			type: [Number, String],
			default: 250
		},
		// 指示器的位置，topLeft|topCenter|topRight|bottomLeft|bottomCenter|bottomRight
		indicatorPos: {
			type: String,
			default: 'bottomCenter'
		},
		// 是否开启缩放效果
		effect3d: {
			type: Boolean,
			default: false
		},
		// 3D模式的情况下，激活item与前后item之间的距离，单位rpx
		effect3dPreviousMargin: {
			type: [Number, String],
			default: 50
		},
		// 是否自动播放
		autoplay: {
			type: Boolean,
			default: true
		},
		// 自动轮播时间间隔，单位ms
		duration: {
			type: [Number, String],
			default: 500
		},
		// 是否衔接滑动，即到最后一张时接着滑动，是否自动切换到第一张
		circular: {
			type: Boolean,
			default: true
		},
		// 图片的裁剪模式
		imgMode: {
			type: String,
			default: 'aspectFill'
		},
		// 从list数组中读取的图片的属性名
		name: {
			type: String,
			default: 'image'
		},
		// 背景颜色
		bgColor: {
			type: String,
			default: '#f3f4f6'
		},
		// 初始化时，默认显示第几项
		current: {
			type: [Number, String],
			default: 0
		},
		// 标题的样式，对象形式
		titleStyle: {
			type: Object,
			default() {
				return {};
			}
		},
		video:{
			type: String,
			default:()=>''
		}
	},
	mounted() {
		this.videos = uni.createVideoContext('myVideo', this);
	},
	watch: {
		// 如果外部的list发生变化，判断长度是否被修改，如果前后长度不一致，重置uCurrent值，避免溢出
		list(nVal, oVal) {
			if (nVal.length !== oVal.length) this.uCurrent = 0;
		},
		// 监听外部current的变化，实时修改内部依赖于此测uCurrent值，如果更新了current，而不是更新uCurrent，
		// 就会错乱，因为指示器是依赖于uCurrent的
		current(n) {
			this.uCurrent = n;
		}
	},
	data() {
		return {
			uCurrent: this.current, // 当前活跃的swiper-item的index
			videos: null,
			showWeeksModal:false,
			progress:0,
			isPaused: false,
			videoDuration: 0,
			showControls:true,
			timerId: null,
			isFullScreen: false
		};
	},
	computed: {
		justifyContent() {
			if (this.indicatorPos == 'topLeft' || this.indicatorPos == 'bottomLeft') return 'flex-start';
			if (this.indicatorPos == 'topCenter' || this.indicatorPos == 'bottomCenter') return 'center';
			if (this.indicatorPos == 'topRight' || this.indicatorPos == 'bottomRight') return 'flex-end';
		},
		titlePaddingBottom() {
			let tmp = 0;
			if (this.mode == 'none') return '12rpx';
			if (['bottomLeft', 'bottomCenter', 'bottomRight'].indexOf(this.indicatorPos) >= 0 && this.mode == 'number') {
				tmp = '60rpx';
			} else if (['bottomLeft', 'bottomCenter', 'bottomRight'].indexOf(this.indicatorPos) >= 0 && this.mode != 'number') {
				tmp = '40rpx';
			} else {
				tmp = '12rpx';
			}
			return tmp;
		},
		// 因为uni的swiper组件的current参数只接受Number类型，这里做一个转换
		elCurrent() {
			return Number(this.current);
		}
	},
	methods: {
		clickVideo(){
			this.showControls = !this.showControls
		},
		updateProgress(e) {
			this.progress = (e.detail.currentTime / this.videoDuration) * 100;
		},
		getVideoDuration(e) {
			this.videoDuration = e.detail.duration;
		},
		startPlay(){
			this.isPaused = false
			// #ifdef APP-PLUS
				this.showWeeksModal = true
			// #endif
			this.timerId = setTimeout(() => {
				this.showControls = false;
			}, 5000);
			this.videos.play()
			this.$emit('changeAutoPlay')
		},
		listClick(index) {
			this.$emit('click', index);
		},
		change(e) {
			let current = e.detail.current;
			this.uCurrent = current;
			this.isPaused = true
			this.videos.pause()
			clearTimeout(this.timerId);
			// 发出change事件，表示当前自动切换的index，从0开始
			this.$emit('change', current);
		},
		// 头条小程序不支持animationfinish事件，改由change事件
		// 暂不监听此事件，因为不再给swiper绑定uCurrent属性
		animationfinish(e) {
			// #ifndef MP-TOUTIAO
			// this.uCurrent = e.detail.current;
			// #endif
		},
		//视频暂停
		videoPause(){
			this.videos.pause()
			// #ifdef APP-PLUS
			this.showWeeksModal = false
			// #endif
			this.isPaused = true
			clearTimeout(this.timerId);
		},
		toggleFullscreen() {
			if (this.isFullScreen) {
				this.isFullScreen = false;
				this.videos.exitFullScreen();
			} else {
				this.isFullScreen = true;
				this.videos.requestFullScreen();
			}
		}
	}
};
</script>

<style lang="scss" scoped>
@import '../../libs/css/style.components.scss';

.u-swiper-wrap {
	position: relative;
	overflow: hidden;
	transform: translateY(0);
}

.u-swiper-image {
	width: 100%;
	will-change: transform;
	height: 100%;
	/* #ifndef APP-NVUE */
	display: block;
	/* #endif */
	/* #ifdef H5 */
	pointer-events: none;
	/* #endif */
}

.u-swiper-indicator {
	padding: 0 24rpx;
	position: absolute;
	@include vue-flex;
	width: 100%;
	z-index: 1;
}

.u-indicator-item-rect {
	width: 26rpx;
	height: 8rpx;
	margin: 0 6rpx;
	transition: all 0.5s;
	background-color: rgba(0, 0, 0, 0.3);
}

.u-indicator-item-rect-active {
	background-color: rgba(255, 255, 255, 0.8);
}

.u-indicator-item-dot {
	width: 14rpx;
	height: 14rpx;
	margin: 0 6rpx;
	border-radius: 20rpx;
	transition: all 0.5s;
	background-color: rgba(0, 0, 0, 0.3);
}

.u-indicator-item-dot-active {
	background-color: rgba(255, 255, 255, 0.8);
}

.u-indicator-item-round {
	width: 14rpx;
	height: 14rpx;
	margin: 0 6rpx;
	border-radius: 20rpx;
	transition: all 0.5s;
	background-color: rgba(0, 0, 0, 0.3);
}

.u-indicator-item-round-active {
	width: 34rpx;
	background-color: rgba(255, 255, 255, 0.8);
}

.u-indicator-item-number {
	padding: 6rpx 16rpx;
	line-height: 1;
	background-color: rgba(0, 0, 0, 0.3);
	border-radius: 100rpx;
	font-size: 26rpx;
	color: rgba(255, 255, 255, 0.8);
}

.u-list-scale {
	transform-origin: center center;
}

.u-list-image-wrap {
	width: 100%;
	height: 100%;
	flex: 1;
	transition: all 0.5s;
	overflow: hidden;
	box-sizing: content-box;
	position: relative;
}

.u-swiper-title {
	position: absolute;
	background-color: rgba(0, 0, 0, 0.3);
	bottom: 0;
	left: 0;
	width: 100%;
	font-size: 28rpx;
	padding: 12rpx 24rpx;
	color: rgba(255, 255, 255, 0.9);
}

.u-swiper-item {
	@include vue-flex;
	overflow: hidden;
	align-items: center;
}
.mask-box {
	position: relative;
	.mask {
		position: absolute;
		left: 0;
		right: 0;
		top: 0;
		width: 100%;
		height: 100%;
		background-color: #000;
		opacity: 0.7;
		display: flex;
		align-items: center;
		justify-content: center;
	}
}

.container {
  position: relative;
}

.controls {
  position: absolute;
  bottom: 45rpx;  // 这里可以调整控制元素的位置
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 42rpx;
}

.progress-bar {
  flex-grow: 1;
  height: 4px;
  background-color: rgba(255, 255, 255, 0.5);
  margin: 0 10px;
  border-radius: 30rpx;
  overflow: hidden;
}

.progress {
  height: 100%;
  background-color: #fff;
}


/* 播放图标 */
.play-icon {
  width: 0;
  height: 0;
  border-top: 16rpx solid transparent;
  border-bottom: 16rpx solid transparent;
  border-left: 26rpx solid #fff;
}

/* 暂停图标 */
.pause-icon {
  position: relative;
  width: 26rpx;
  height: 32rpx;
}

.pause-icon:before,
.pause-icon:after {
  content: "";
  position: absolute;
  top: 0;
  width: 8rpx;
  height: 100%;
  background-color: #fff;
}

.pause-icon:before {
  left: 0rpx;
}

.pause-icon:after {
  right: 0rpx;
}
.fullscreen-icon {
  width: 35rpx;
  height: 35rpx;
  position: relative;
  background: transparent;
  border: 2px dashed #fff;
}
</style>
